<template>
    <!-- 电影展示组件 start -->
    <div class="film-item">
        <div class="film-img">
            <!-- 
                base.css 131 行 补充如下代码
                .list-content > .film-item > .film-img > img,
                .content-list > .film-item > .film-img > img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            -->
            <img :src="film.filmImg" ref="img" @error="setDefaultImg()">
        </div>
        <div class="film-title">{{ film.filmName }}</div>
        <div class="film-source">
            <template v-if="film.source!=null">
                <span class="star-img" 
                    v-for="c in 5" :key="c"
                    :class=" film.source*1>=c?'open':'close' "
                ></span>
                <span class="star-source">{{ film.source | fixed }}</span>
            </template>
            <span v-else class="star-tip">暂无评分</span>
        </div>
    </div>
    <!-- 电影展示组件 end -->
</template>
<script>
module.exports = {
    props:{
        film:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    filters:{
        fixed(v,size=1){
            return (v*1).toFixed(size);
        }
    },
    methods: {
        setDefaultImg(){
            // console.log(1);
            this.$refs.img.src = "./imgs/404.png"
        }
    },
}
</script>